import '../css/style.scss';
import '../css/swiper.min.css';

import Swiper from './swiper.min.js'
import $ from 'zepto-webpack'
// console.log(location);
function a(){
  $('body').html('a')
}
window.onload = () => {
  const search = location.search
  if(search.indexOf('blue')!=-1){
    $('#content').html($('#blue').html())
  }else if(search.indexOf('black')!=-1){
    $('#content').html($('#black').html())
  }else if(search.indexOf('gold')!=-1){
    $('#content').html($('#gold').html())
  }else if(search.indexOf('green')!=-1){
    $('#content').html($('#green').html())
  }else if(search.indexOf('purple')!=-1){
    $('#content').html($('#purple').html())
  }else{
    $('#content').html($('#index').html())

    
    var p2Swiper = new Swiper(".p2-swiper-container", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      navigation: {
        nextEl: ".p2-swiper-button-right",
        prevEl: ".p2-swiper-button-left",
      },
      on: {
        init: function () {
          //Swiper初始化了
          $('.p2-swiper-container .swiper-hide-item').css('opacity', 0)
          $('.p2-swiper-container .swiper-slide').eq(this.activeIndex).find('.swiper-hide-item').css('opacity', 1)
        },
        slideChange: function () {
          //   $('.p2-swiper-container .swiper-hide-item').css('opacity',0)
          $('.p2-swiper-container .swiper-hide-item').css('opacity', 0)
          $('.p2-swiper-container .swiper-slide').eq(this.activeIndex).find('.swiper-hide-item').css('opacity', 1)

          //   $(slide).find('.swiper-hide-item').css('opacity',1)
          // alert('改变了，activeIndex为'+this.activeIndex);
        },
        progress: function (progress) {
          // console.log('progress', progress)

          for (let i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);

            var slideProgress = this.slides[i].progress;
            let modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            let translate = slideProgress * modify * -2 + "px";
            let scale = 1 - Math.abs(slideProgress) / 5;
            let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(
              "translateX(" + translate + ") scale(" + scale + ")"
            );
            slide.css("zIndex", zIndex);
            slide.css("opacity", 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css("opacity", 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            slide.transition(transition);
          }
        },
      },
    });

    var p3Swiper = new Swiper(".p3-swiper-container", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      navigation: {
        nextEl: ".p3-swiper-button-right",
        prevEl: ".p3-swiper-button-left",
      },
      on: {
        init: function () {
          //Swiper初始化了
          $('.p3-swiper-container .swiper-hide-item').css('opacity', 0)
          $('.p3-swiper-container .swiper-slide').eq(this.activeIndex).find('.swiper-hide-item').css('opacity', 1)
        },
        slideChange: function () {
          //   $('.p2-swiper-container .swiper-hide-item').css('opacity',0)
          $('.p3-swiper-container .swiper-hide-item').css('opacity', 0)
          $('.p3-swiper-container .swiper-slide').eq(this.activeIndex).find('.swiper-hide-item').css('opacity', 1)
          console.log('$(\'.p2-swiper-container .swiper-slide\').eq(this.activeIndex)', $('.p2-swiper-container .swiper-slide').eq(this.activeIndex))
          //   $(slide).find('.swiper-hide-item').css('opacity',1)
          // alert('改变了，activeIndex为'+this.activeIndex);
        },
        progress: function (progress) {
          // console.log('progress', progress)

          for (let i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);

            var slideProgress = this.slides[i].progress;
            let modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            let translate = slideProgress * modify * -2 + "px";
            let scale = 1 - Math.abs(slideProgress) / 5;
            let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(
              "translateX(" + translate + ") scale(" + scale + ")"
            );
            slide.css("zIndex", zIndex);
            slide.css("opacity", 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css("opacity", 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            slide.transition(transition);
          }
        },
      },
    });

  
  }

  $('#content').on('click','.jump_url',function(){
    _hmt.push(['_trackEvent', 'oppo', $(this).attr('data-name')])
    if($(this).attr('data-url')){
      location.href = location.href+$(this).attr('data-url')
    }
   
  })

  

  if($('.color-swiper-container')){
    var colorSwiper = new Swiper(".color-swiper-container", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      initialSlide :1,
      centeredSlides: true,
      pagination: {
        el: '.color-pagination',
      },
      navigation: {
        nextEl: ".color-swiper-button-right",
        prevEl: ".color-swiper-button-left",
      },
      on: {
  
        progress: function (progress) {
          // console.log('progress', progress)
  
          for (let i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
  
            var slideProgress = this.slides[i].progress;
            let modify = 1;
            if (Math.abs(slideProgress) > 1) {
              modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            let translate = slideProgress * modify * -2 + "px";
            let scale = 1 - Math.abs(slideProgress) / 5;
            let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform(
              "translateX(" + translate + ") scale(" + scale + ")"
            );
            slide.css("zIndex", zIndex);
            slide.css("opacity", 1);
            if (Math.abs(slideProgress) > 3) {
              slide.css("opacity", 0);
            }
          }
        },
        setTransition: function (transition) {
          for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            slide.transition(transition);
          }
        },
      },
    });
  
  }

  $.ajax({
    url:
      "https://show.gotokeep.com/wxjssdk?url=" +
      encodeURIComponent(location.href),
    success: function (res) {
      wx.config({
        debug: res.debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.appId, // 必填，公众号的唯一标识
        timestamp: res.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.nonceStr, // 必填，生成签名的随机串
        signature: res.signature, // 必填，签名
        jsApiList: ["updateAppMessageShareData"], // 必填，需要使用的JS接口列表
      });
    },
  });
  wx.ready(function () {
    wx.updateAppMessageShareData({
      title: "OPPO颜出必型", // 分享标题
      desc: "打卡OPPO颜出必型课程挑战赛，赢时尚智能运动装备！", // 分享描述
      link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl:
        "https://staticweb.keepcdn.com/third-feapps/oppo0615/img/share-img.jpg",
      success: function () {
        // 设置成功
      },
    });
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  });
 

};